
// 首页业务

// 从本地获取用户名
const user = localStorage.getItem('user')
document.querySelector('.username').innerHTML = user

// 调用鉴权函数
checkLogin()

// 退出登录
logout()


// 渲染统计数据
async function getData() {
    const { data: {
        groupData, overview, year, salaryData, provinceData
    } } = await axios.get('/dashboard')

    // 调用函数 渲染概览数据
    renderOverview(overview)
    // 
    renderYearSalary(year)
    // 
    renderSalary(salaryData)
    // 
    renderGroup(groupData)
    // 
    renderGenderData(salaryData)
    //  
     renderProvince(provinceData)
}
getData()

// 1.概览业务 - overview
function renderOverview(overview) {
    Object.keys(overview).forEach((key) => {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })
}

// 2.薪资走势 - year
function renderYearSalary(year) {
const myChart = echarts.init(document.querySelector('#line'))
// 设置配置项
const option = {
    // 标题
    title:{
        text:'2024全学科薪资走势',
        left:13,
        top:10,
        textStyle:{
            fontsize:16
        }
    },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: year.map(item =>item.month),
    axisLine:{
      lineStyle:{
        color:'#999',
        type:'dashed'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      lineStyle:{
        type:'dashed'
      }
    }
  },
// 系列图表
  series: [
    {
      data: year.map(item =>item.salary),
      type: 'line',
    //   区域样式
areaStyle :{
    color:{
        type:'liner',
        x:0,
        y:0,
        x2:0,
        y2:1,
        colorStops: [{
            offset: 0,color: '#c0def7'
        },{
             offset: 1,color: '#e6fafc'
        }],   
    }
      },
      smooth:true,
      symbolSize:8,
    //   线条样式
    lineStyle :{
    width:6,
    color:{
        type:'liner',
        x:0,
        y:0,
        x2:1,
        y2:2,
        colorStops: [{
            offset: 0,color: '#4a9eea'
        },{
             offset: 1,color: '#5f7ceb'
        }],   
    }
      }
    }
  ]
};

// 使用配置项
myChart.setOption(option)
}


// 3.薪资分布 - salaryData
function renderSalary(salaryData) {
    // 实例化
    const myChart = echarts.init(document.querySelector('#salary'))
    // 设置配置项目
 const option = {
  title:{
    text:'班级薪资分布',
    left:10,
    top:10
  },
  tooltip: {
    trigger: 'item',
    data: ['班级薪资分布']
  },
  legend: {
   bottom: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data:salaryData.map(item => {
        return{value: item.g_count + item.b_count,name: item.label}
      })
    //   [
    //     { value: 1048, name: 'Search Engine' },
    //     { value: 735, name: 'Direct' },
    //     { value: 580, name: 'Email' },
    //     { value: 484, name: 'Union Ads' },
    //   ]
    }
  ],
  color:['#f0a645','#6295f8','#63b9f4','#6ad09e']
};
    // 使用配置项
myChart.setOption(option)
 }

// 4.分组数据 - groupData
function renderGroup(groupData) { 
    const myChart = echarts.init(document.querySelector('#lines'))
    // 配置项
  const option = {
  xAxis: {
    type: 'category',
    // 学生姓名
    data:groupData[1].map(item => item.name),
    axisLine:{
      lineStyle:{
        color:'#999',
        type:'dashed'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      lineStyle:{
        type:'dashed'
      }
    }
  },
  series: [
    {
      data:groupData[1].map(item => item.hope_salary),
      type: 'bar',
      itemStyle :{
    color:{
        type:'liner',
        x:0,
        y:0,
        x2:0,
        y2:1,
        colorStops: [{
            offset: 0,color: '#70d2a2'
        },{
             offset: 1,color: '#ccefde'
        }],   
    }
      },
    },
    {
      data:groupData[1].map(item => item.salary),
      type: 'bar',
      itemStyle :{
    color:{
        type:'liner',
        x:0,
        y:0,
        x2:0,
        y2:1,
        colorStops: [{
            offset: 0,color: '#6faff9'
        },{
             offset: 1,color: '#d2e3f8'
        }],   
    }
      },
    }
  ]
};
   // 使用配置项
    myChart.setOption(option)


    // 切换分组数据
    const bens = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        if(e.target.classList.contains('btn')) {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')

            const index = e.target.innerHTML

            option.xAxis.data = groupData[index].map(item => item.name)
            option.series[0].data = groupData[index].map(item => item.hope_salary)
            option.series[1].data = groupData[index].map(item => item.salary)

            // 重新设置配置项
            myChart.setOption(option)

        }
    })
}

// 男女薪资分布
function renderGenderData(salary){
    // 实例化
    const myChart = echarts.init(document.querySelector('#gender'))
    // 设置配置项目
//     const datas = [
//   [
//     { name: '圣彼得堡来客', value: 5.6 },
//     { name: '陀思妥耶夫斯基全集', value: 1 },
//     { name: '史记精注全译（全6册）', value: 0.8 },
//     { name: '加德纳艺术通史', value: 0.5 },
//   ],

//   [
//     { name: '银河帝国5：迈向基地', value: 3.8 },
//     { name: '俞军产品方法论', value: 2.3 },
//     { name: '艺术的逃难', value: 2.2 },
//     { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
//   ],
// ];
const datas = [
    salary.map(item => {
    return {name: item.label, value: item.b_count}
   }),
    salary.map(item => {
    return {name: item.label, value: item.g_count}
   }),
]
 const  option = {
  title: [
    {
    text: '男女薪资分布',
    left: 10,
    top: 10,
    textStyle: {
      fontWeight: 'normal',
      fontSize: 16
    }
  },{
    text: '男生',
    left: 'center',
    top:'45%',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 14
    }
  },{
    text: '女生',
    left: 'center',
    bottom:'5%',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 14
    }
  },
    ],
    tooltip:{
    trigger:'item'
    },
  series: datas.map(function (data, idx) {
    var top = idx * 40 + 10;
    return {
      type: 'pie',
      radius: [45, 60],
      top: top + '%',
      height: '33.33%',
      left: 'center',
      width: 400,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      
      data: data,
     color:['#f2a33a','#5198f7','#56bdf7','#62d499']
    };
  })
};


    // 使用配置项
    myChart.setOption(option)
}


// 6.籍贯分布 - provinceData
function renderProvince() { 
const myChart = echarts.init(document.querySelector('#map'))
const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
 const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myChart.setOption(option)
}






// // 渲染统计数据
// async function getData() {
//     const token = localStorage.getItem('token')
//     const { data: {
//         groupData, overview, year, salaryData, provinceData
//     } } = await axios.get('/dashboard')
// const { data: { data: {
//     groupData, overview, year, salaryData, provinceData
// } } } = await axios({
//     url: '/dashboard',
//     // 请求需要携带token才能拿到数据
//     // headers: {
//     //     Authorization: token
//     // }
// })

// document.querySelector('.salary').innerHTML = overview.salary
// document.querySelector('.student_count').innerHTML = overview.student_count
// document.querySelector('.age').innerHTML = overview.age
// document.querySelector('.group_count').innerHTML = overview.grounp_count

// 拿到对象中的属性名放到数组中
// console.log(Object.keys(overview))

//     Object.keys(overview).forEach((key) => {
//         document.querySelector(`.${key}`).innerHTML = overview[key]
//     })
// }
// getData()